<template>
  <div v-show="isShow" class="image-preview" @click.self="closePreview">
    <!-- 图片容器：支持左右滑动 -->
    <div class="preview-wrapper" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
      <img v-for="(img, idx) in images" :key="idx" :src="img" class="preview-image" :style="{
        transform: `translateX(${-(currentIndex * 100)}%)`,
        transition: isTransition ? 'transform 0.3s ease' : 'none'
      }" />
    </div>

    <!-- 页码指示器 -->
    <div class="page-indicator">
      {{ currentIndex + 1 }} / {{ images.length }}
    </div>

    <!-- 关闭按钮（可选） -->
    <button class="close-btn" @click="closePreview">×</button>
  </div>
</template>
<script>
export default {
  name: 'ImagePreview',
  props: {
    images: {
      type: Array,
      required: true,
    },
    defaultIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      isShow: false,
      currentIndex: this.defaultIndex,
      startX: 0,    // 触摸起始X坐标
      moveX: 0,     // 触摸移动X坐标
      isTransition: true, // 是否启用过渡动画
    };
  },
};
</script>
